<template>
    <div id="two-r">
      <div class="set-cherts">
          <div class="top-s" style="font-size: 14px;">用餐情况</div>
          <div class="two-con set-con">
              <div class="two-con-data">
                  <div class="two-con-data-img"><img src="./img/ren.png" /></div>
                  <div class="two-con-data-info">
                      <span class="two-con-data-span1">当月累计用餐次数</span>
                      <span class="two-con-data-span2">125688<i>次</i></span>
                  </div>
              </div>
              <div class="two-con-data">
                  <div class="two-con-data-img"><img src="./img/ben.png" /></div>
                  <div class="two-con-data-info">
                      <span class="two-con-data-span1">当月食堂活跃人数</span>
                      <span class="two-con-data-span2">23126<i>人</i></span>
                  </div> 
              </div>
              <div class="two-con-data">
                  <div class="two-con-data-img"><img src="./img/ren.png" /></div>
                  <div class="two-con-data-info">
                      <span class="two-con-data-span1">当月食堂平均满意度</span>
                      <span class="two-con-data-span2">88.5<i>%</i></span>
                  </div>
              </div>
              <div class="two-con-data">
                  <div class="two-con-data-img"><img src="./img/ben.png" /></div>
                  <div class="two-con-data-info">
                      <span class="two-con-data-span1">当月投诉反馈处理率</span>
                      <span class="two-con-data-span2">82.6<i>%</i></span>
                  </div> 
              </div>
          </div>
      </div>
      <div class="set-cherts">
          <div class="top-s" style="font-size: 14px;">宿舍信息</div>
          <div class="set-con">
            <div :style="fontSizeFun" class="two-l-4-echarts" ref="reachRef"></div>
          </div>
      </div>
      
      <div class="set-cherts">
          <div class="top-s" style="font-size: 14px;">车辆信息</div>
          <div class="set-con">
            <div :style="fontSizeFun" class="two-l-4-echarts" ref="reachRefOne"></div>
            <!-- <div class="tab-s">
                <div class="scroll">
                    <table class="table-1">
                        <tr>
                            <th class="td-1">会议预定信息</th>
                            <th class="td-2">会议状态</th>
                        </tr>
                    </table>
                    <list-scroll class="box" :speed="0.3">
                        <div class="list">
                            <div class="item-s" v-for="(item,index) in dataList" :key="index">
                                <div class="item-s-c td-1" style="padding-left: 15px;"> {{ item.name }} </div>
                                <div v-if="item.start" class="item-s-c td-2" style="color: rgba(0,255,40,0.6);"> {{ item.location }} </div>
                                <div v-else class="item-s-c td-2" style="color: rgba(255,179,0,0.6);"> {{ item.location }} </div>
                            </div>
                        </div>
                    </list-scroll>
                </div>
            </div> -->
          </div>
      </div>
    </div>
  </template>
  
  <script>
  import * as echarts from 'echarts'
//   import ListScroll from "./listScroll"
  export default {
    name: 'two-r',
    data() {
      return {
        dataList: [
            {name:'会议室1',location:'已预定',start: false,},
            {name:'会议室1',location:'空闲',start: true,},
            {name:'会议室1',location:'已预定',start: false,},
            {name:'会议室1',location:'已预定',start: false,},
            {name:'会议室1',location:'已预定',start: false,},
            {name:'会议室1',location:'空闲',start: true,},
            {name:'会议室1',location:'已预定',start: false,},
            {name:'会议室1',location:'已预定',start: false,},
            {name:'会议室1',location:'已预定',start: false,},
            {name:'会议室1',location:'已预定',start: false,},
            {name:'会议室1',location:'已预定',start: false,},
            {name:'会议室1',location:'已预定',start: false,},
            {name:'会议室1',location:'空闲',start: true,},
            {name:'会议室1',location:'已预定',start: false,},
            {name:'会议室2',location:'已预定',start: false,},
            {name:'会议室2',location:'已预定',start: false,},
            {name:'会议室2',location:'空闲',start: true,},
            {name:'会议室2',location:'已预定',start: false,},
            {name:'会议室2',location:'已预定',start: false,},
            {name:'会议室2',location:'已预定',start: false,},
            {name:'会议室2',location:'已预定',start: false,},
            {name:'会议室2',location:'空闲',start: true,},
            {name:'会议室3',location:'已预定',start: false,},
            {name:'会议室3',location:'已预定',start: false,},
            {name:'会议室3',location:'已预定',start: false,},
            {name:'会议室3',location:'已预定',start: false,},
            {name:'会议室3',location:'已预定',start: false,},
            {name:'会议室3',location:'已预定',start: false,},
            {name:'会议室3',location:'已预定',start: false,},
            {name:'会议室3',location:'空闲',start: true,},
        ],
      };
    },
    components: { 
        // ListScroll
    },
    
    mounted() {
      let that = this
      that.$nextTick(() => {
          that.fontSizeFun(14)
          that.initCharts()
          that.initChartsOne()
      })
    },
    methods: {
      fontSizeFun(val,initWidth=1920){
          const nowClientWidth = document.documentElement.clientWidth
          return val * (nowClientWidth/initWidth) + 'px'
      },
      initCharts(){
          let myChart = ''
          if(this.$refs.reachRef){ myChart = echarts.init(this.$refs.reachRef) }
          window.addEventListener('resize',() => {
              myChart.resize()
          })
          let option = {
              tooltip : {
                  trigger: 'axis',
                  axisPointer: {
                      type: 'line',
                      label: {
                          backgroundColor: '#6a7985'
                      }
                  }
              },
              legend: {
                  show: true,
                  top: '4%',
                  orient: 'horizontal',
                  itemHeight: 10,
                  itemWidth: 10,
                  data: [
                      {
                          name: '宿舍入住人数',
                          icon: 'rect',
                          textStyle: {
                            color:'#FFFFFF',
                          }
                      },
                      {
                          name: '宿舍入住率',
                          icon: 'line',
                          textStyle: {
                            color:'#FFFFFF',
                          }
                      }
                  ],
              },
              grid: {
                  left: '3%',
                  right: 10,
                  bottom: 4,
                  top: 30,
                  containLabel: true,
                  borderColor: 'rgb(61,61,61)'
              },
              xAxis: {
                  type: 'category',
                  boundaryGap : true,
                  // position: 'bottom',
                  data: ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15'],
                  axisLine: {
                      show: true,
                      lineStyle: {
                          color: 'rgba(255,255,255,0.3)'
                      }
                  },
                  axisTick: {
                      show: false,
                  },
                  axisLabel: {
                      show: true,
                      color: "rgba(255,255,255,1)",
                      margin: 10,
                  },
                  splitLine: {
                      show: false,
                      lineStyle: {
                          color: "rgba(255,255,255,0.06)"
                      }
                  },
                  splitArea:{
                      show: false,
                      areaStyle:{
                          color: 'rgba(255,255,255,0.04)',
                      }
                  },
              },
              yAxis: {
                  type: 'value',
                  // data: ['产出达成率', 'DT损失率', 'FTY达成率', '任务完成率'],
                  min: 0,
                  max: 600,
                  interval: 300,
                  axisTick: {
                      show: false,
                  },
                  axisLabel: {
                     color: "rgba(255,255,255,1)"
                  },
                  axisLine: {
                      show: false,
                  },
                  splitLine: {
                      show: true,
                      lineStyle: {
                          color: "rgba(255,255,255,0.1)"
                      }
                  },
                  splitArea:{
                      show: false,
                      areaStyle:{
                          color: 'rgba(255,255,255,0.02)',
                      }
                  },
              },
              series: [
                  {
                      name:'宿舍入住人数',
                      data: [350, 260, 470, 340,530, 410, 470,350, 260, 470, 340,530, 410, 470,410],
                      type: 'bar',
                      showBackground: true,
                      backgroundStyle: {
                          color: 'rgba(255,255,255,0.1)'
                      },
                      barWidth:'20%',
                      label: {
                          show: false,
                          position: 'left',
                          offset: [],
                          formatter: '{c}%',
                          textStyle: {
                              color: '#14E0FF',
                              // fontSize: 14,
                          }
                      },
                      itemStyle: {
                          normal: {
                              color: '#00E5FF'
                          }
                      },
                  },
                  {
                      name: '宿舍入住率',
                      data: [350, 260, 470, 340,530, 410, 470,350, 260, 470, 340,530, 410, 470,410],
                      type: 'line',
                      showBackground: true,
                      showSymbol: false,
                      smooth: false,
                      backgroundStyle: {
                          color: 'rgba(255,255,255,0.1)'
                      },
                      barWidth:'20%',
                      label: {
                          show: false,
                          // position: 'left',
                          offset: [],
                          formatter: '{c}%',
                          textStyle: {
                              color: '#14E0FF',
                              // fontSize: 14,
                          }
                      },
                      itemStyle: {
                          normal: {
                              color:'#009ADF',
                          }
                      },
                      lineStyle: {
                          color: '#009ADF',
                      },
                  },
              ]
          }
          myChart.setOption(option)
          setTimeout(() => {
              let width = myChart.getWidth()
              if(width && width !== 0){
                  let opt = myChart.getOption();
                  let grid = opt.grid[0];
                  let right = grid.right;
                  let left = grid.left;
                  right = width*parseFloat(right)/100;
                  left = width*parseFloat(left)/100;
                  let x = width-left-right;
                  option.series[0].label.offset = [x-20,0]
              }
              return option && myChart.setOption(option)
          },200)
      },
      initChartsOne(){
          let myChart = echarts.init(this.$refs.reachRefOne)
          window.addEventListener('resize',() => {
              myChart.resize()
          })
          let option = {
              tooltip : {
                  trigger: 'axis',
                  axisPointer: {
                      type: 'line',
                      label: {
                          backgroundColor: '#6a7985'
                      }
                  }
              },
              legend: {
                  show: true,
                  data:['日车流量','停车位','临时车辆','员工车辆'],
                  top: '5%',
                  orient: 'horizontal',
                  icon: 'circle',
                  textStyle:{
                      color: '#FFFFFF',
                  }
              },
              grid: {
                  left: '3%',
                  right: 10,
                  bottom: 4,
                  top: 40,
                  containLabel: true,
                  borderColor: 'rgb(61,61,61)'
              },
              xAxis: {
                  type: 'category',
                  boundaryGap : true,
                  // position: 'bottom',
                  // data: ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15'],
                  data: ['1','2','3','4','5','6','7','8','9','10','11','12'],
                  axisLine: {
                      show: true,
                      lineStyle: {
                          color: 'rgba(255,255,255,0.4)'
                      }
                  },
                  axisTick: {
                      show: false,
                  },
                  axisLabel: {
                      show: true,
                      color: "rgba(255,255,255,1)",
                      margin: 10,
                  },
                  splitLine: {
                      show: false,
                      lineStyle: {
                          color: "rgba(255,255,255,0.06)"
                      }
                  }
              },
              yAxis: {
                  type: 'value',
                  min: '0',
                  max: '1000',
                  interval: 500,
                  axisTick: {
                      show: false,
                  },
                  axisLabel: {
                     color: "rgba(255,255,255,1)"
                  },
                  axisLine: {
                      show: false,
                  },
                  splitLine: {
                      show: true,
                      lineStyle: {
                          color: "rgba(255,255,255,0.14)"
                      }
                  },
                  splitArea:{
                      show: false,
                      areaStyle:{
                          color: 'rgba(255,255,255,0.02)',
                      }
                  },
              },
              series: [
                  {
                    name: '日车流量',
                    // data: [480, 520, 630, 310,460, 570, 690,480, 520, 630, 310,460, 570, 690,570],
                    data: [480, 520, 380, 430,360, 480, 420,480, 440, 460, 440,460],
                    type: 'line',
                    showBackground: true,
                    showSymbol: false,
                    smooth: true,
                    backgroundStyle: {
                        color: 'rgba(255,255,255,0.1)'
                    },
                    barWidth:'20%',
                    label: {
                        show: false,
                        // position: 'left',
                        offset: [],
                        formatter: '{c}%',
                        textStyle: {
                            color: '#14E0FF',
                            // fontSize: 14,
                        }
                    },
                    itemStyle: {
                        normal: {
                            color:'#00E5FF',
                        }
                    },
                    lineStyle: {
                        color: '#00E5FF',
                    },
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient( 0, 0, 0, 1,[
                                {
                                    offset: 0, 
                                    color: 'rgba(0,229,255,0.4)'
                                },
                                {
                                    offset: 1, 
                                    color: 'rgba(0,229,255,0)'
                                }
                            ]),
                        }
                    },
                  },
                  {
                    name: '停车位',
                    // data: [340, 780, 620, 430,540, 320, 510,340, 780, 620, 430,540, 320, 510,320],
                    data: [580, 520, 480, 530,460, 580, 420,580, 540, 460, 540,560],
                    type: 'line',
                    showBackground: true,
                    showSymbol: false,
                    smooth: true,
                    backgroundStyle: {
                        color: 'rgba(255,255,255,0.1)'
                    },
                    barWidth:'20%',
                    label: {
                        show: false,
                        // position: 'left',
                        offset: [],
                        formatter: '{c}%',
                        textStyle: {
                            color: '#14E0FF',
                            // fontSize: 14,
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#22FFF0',
                        }
                    },
                    lineStyle: {
                        color: '#22FFF0',
                    },
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient( 0, 0, 0, 1,[
                                {
                                    offset: 0, 
                                    color: 'rgba(34,255,240,0.4)'
                                },
                                {
                                    offset: 1, 
                                    color: 'rgba(34,255,240,0)'
                                }
                            ]),
                        }
                    },
                  },
                  {
                    name: '临时车辆',
                    // data: [940, 820, 850, 430,570, 500, 610,940, 820, 850, 430,570, 500, 610,570],
                    data: [680, 620, 680, 530,660, 680, 420,680, 540, 660, 540,660],
                    type: 'line',
                    showBackground: true,
                    showSymbol: false,
                    smooth: true,
                    backgroundStyle: {
                        color: 'rgba(255,255,255,0.1)'
                    },
                    barWidth:'20%',
                    label: {
                        show: false,
                        // position: 'left',
                        offset: [],
                        formatter: '{c}%',
                        textStyle: {
                            color: '#14E0FF',
                            // fontSize: 14,
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#44FFCF',
                        }
                    },
                    lineStyle: {
                        color: '#44FFCF',
                    },
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient( 0, 0, 0, 1,[
                                {
                                    offset: 0, 
                                    color: 'rgba(68,255,207,0.4)'
                                },
                                {
                                    offset: 1, 
                                    color: 'rgba(68,255,207,0)'
                                }
                            ]),
                        }
                    },
                  },
                  {
                    name: '员工车辆',
                    // data: [670, 540, 780, 650,890, 570, 320,670, 540, 780, 650,890, 570, 320,450],
                    data: [670, 540, 680, 550,690, 670, 520,670, 540, 780, 650,590],
                    type: 'line',
                    showBackground: true,
                    showSymbol: false,
                    smooth: true,
                    backgroundStyle: {
                        color: 'rgba(255,255,255,0.1)'
                    },
                    barWidth:'20%',
                    label: {
                        show: false,
                        // position: 'left',
                        offset: [],
                        formatter: '{c}%',
                        textStyle: {
                            color: '#14E0FF',
                            // fontSize: 14,
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#009ADF',
                        }
                    },
                    lineStyle: {
                        color: '#009ADF',
                    },
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient( 0, 0, 0, 1,[
                                {
                                    offset: 0, 
                                    color: 'rgba(0,154,223,0.4)'
                                },
                                {
                                    offset: 1, 
                                    color: 'rgba(0,154,223,0)'
                                }
                            ]),
                        }
                    },
                  }
              ]
          }
          return option && myChart.setOption(option)
      },
    },
  };
  </script>
  
  <style lang="scss" scoped>
  ::-webkit-scrollbar{
      width: 2px;
      height: 2px;
  }
  ::-webkit-scrollbar-track {
      background: rgba($color: #f3f4f9, $alpha: 0.1);
      border-radius: 2px;
  }
  ::-webkit-scrollbar-thumb {
      background: rgba($color:  #c8d2e0, $alpha: 0.1);
      border-radius: 10px;
  }
  ::-webkit-scrollbar-thumb:hover {
      background: rgba($color:   #b4b4b4, $alpha: 0.1);
  }
  ::-webkit-scrollbar-corner {
      background: rgba($color:    #c8d2e0, $alpha: 0.1);
  }
  // 火狐
  * {
      scrollbar-color: #c8d2e0 #f3f4f9;
      /* 滑块颜色  滚动条背景颜色 */
      scrollbar-width: thin;
      /* 滚动条宽度有三种：thin、auto、none */
  }
  .set-con{
      width: 100%;
      height: 84%;
      overflow: hidden;
  }
  .set-con:hover{
      overflow: hidden;
  }
  .set-flex{
      display: flex;
      justify-content: center;
      flex-direction: column;
  }
  
  #two-r{
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      height: 100%;
      .set-cherts{
          width: 100%;
          height: 32.7%;
          background: rgba($color: #005ABF, $alpha: 0.2);
          .top-s{
              padding: 10px 0 10px 10px;
              font-weight: 600;
              font-style: oblique;
              background: rgba($color: #005ABF, $alpha: 0.4);
          }
          .two-l-4-echarts{
              width: 100%;
              height: 100%;
          }
          .two-con{
              display: flex;
              justify-content: space-around;
              flex-direction: column;
              .two-con-data{
                  display: flex;
                  flex-direction: row;
                  justify-content: flex-start;
                  align-items: center;
                  border: 1px solid #0061B2;
                  width: 90%;
                  margin: 10px auto 0 auto;
                  .two-con-data-info{
                      width: 80%;
                      display: flex;
                      flex-direction: row;
                      justify-content: center;
                      .two-con-data-span1{
                          font-size: 14px;
                      }
                  }
                  .two-con-data-img{
                      background: rgba($color: #0082FF, $alpha: 0.4);
                      width: 20%;
                      height: 40px;
                      display: flex;
                      flex-direction: column;
                      justify-content: center;
                      img{
                          display: block;
                          width: 25%;
                          margin: auto;
                      }
                  }
                  .two-con-data-span2{
                      font-size: 23px;
                      color: #00E5FF;
                      font-weight: bold;
                      margin-left: 10px;
                      i{
                          font-size: 14px;
                          font-weight: normal;
                      }
                  }
              }
          }
      }
  
      .tab-s{
        width: 92%;
        height: 90%;
        margin: 10px auto 0 auto;
        overflow: hidden;
        .table-1{
            position: relative;
            width: 100%;
            text-align: center;
            background: rgba($color: #153863, $alpha: 0.4);
            z-index: 1;
            th{
                text-align: center;
                width: 50%;
            }
        }

        .td-1,.td-2,.td-3{
            // width: 20%;
            height: 30px;
            line-height: 30px;
        }
        .td-4,.td-5{
            width: 20%;
            img{
                width: 20px;
                height: 20px;
                margin-top: 5px;
            }
        }
        .box {
            height: 300px;
            .list {
                width: 100%;
                .item-s {
                    display: flex;
                    justify-content: space-between;
                    cursor: pointer;
                    &:hover {box-shadow: inset 0px 0px 16px 0px #14B5FF;color: #14E0FF;}
                    color: rgb(21,136,170);
                    table-layout:fixed;
                    border-bottom: 1px solid rgb(21,136,189);
                    .item-s-c{
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        text-align: center;
                        width: 50%;
                    }
                }
            }
        }
      }
  }
  </style>